<!--
 * @Description: 网格布局
 * @Author: rendc
 * @Date: 2025-09-17 09:18:18
 * @LastEditors: rendc
 * @LastEditTime: 2025-09-17 11:28:19
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网格布局</title>
  <style>
    /* 清除默认布局样式 */
    * {
      margin: 0;
      padding: 0;
    }

    .main {
      border: 1px solid red;
      width: 100vw;
      height: 100vh;
    }

    .app {
      /* 设置布局容器 - 采用网格布局 */
      display: grid;
      /* 定义每一列的宽度 */
      /* grid-template-columns: 100px 100px 100px; */
      /* grid-template-columns: 100px 100px 100px; */
      /* 重复单元格 - 相同宽度 */
      /* grid-template-columns: repeat(auto-fill, 300px); */
      /* 重复单元格 - 相同宽度 */
      /* grid-template-columns: repeat(2, 100px 20px 50px); */
      /* grid-template-columns: 33.33% 33.33% 33.33%; */
      /* fr */
      grid-template-columns: 1fr 3fr;
      /* minmax */
      /* min-width: 200px;
      min-height: 200px; */
      /* grid-template-columns: minmax(200px, 1fr) minmax(600px, 3fr); */
      /* auto */
      /* grid-template-columns: 100px auto 100px; */
      /* 十二网格布局 十二栅格布局*/
      /* grid-template-columns: repeat(3, 1fr); */
      /* 定义每一行的行高 */
      /* grid-template-rows: 350px 350px 350px 350px; */
      /* grid-row-gap: 20px; */
      /* grid-column-gap: 20px; */
      /* grid-gap: 20px; */
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 100px 100px 100px;
      /* grid-template-areas:
        'a b c'
        'd e f'
        'g h i'; */
      /* grid-template-areas:
        'header header header'
        'sidebar main main'
        'footer footer footer'; */
      /* 网格分区 */
      grid-template-areas:
        'header header header'
        'main main main'
        'footer footer footer';
      /* 控制单元格填充的顺序 默认值 row */
      /* grid-auto-flow: row; */
      /* grid-auto-flow: column; */
      /* dense 尽可能紧密填满，尽量不出现空格 */
      grid-auto-flow: row dense;
      /* justify-items: center; */
      /* align-items: end; */
      /* place-items: start end; */
    }

    .inner {
      border: 1px solid red;
      /* background-color: red; */
      /* display: grid; 容器的属性会导致项目的部分样式失效 */
      /* display: inline-block; */
      /* width: 200px; */
      /* height: 200px; */
    }

    .inner1 {
      background-color: #00F9D3;
      grid-column-start: 2;
      grid-column-end: 4;
    }

    .inner2 {
      background-color: #00BDF8;
      grid-column-start: 2;
      grid-column-end: 2;
      /* grid-row-start: 2; */
    }

    .inner3 {
      background-color: #FFE445;
    }

    .inner4 {
      background-color: #FF4EB6;
    }

    .inner5 {
      background-color: #B257E5;
    }

    .inner6 {
      background-color: #6DE86B;
    }

    .inner7 {
      background-color: #EBC731;
    }

    .inner8 {
      background-color: #D6E86B;
    }

    .inner9 {
      background-color: #A1E86B;
    }
  </style>
</head>

<body>
  <div class="main">
    <!-- 容器 -->
    <div class="app">
      <!-- 项目 -->
      <div class="inner inner1">1111</div>
      <div class="inner inner2">2</div>
      <div class="inner inner3">3</div>
      <div class="inner inner4">4</div>
      <div class="inner inner5">5</div>
      <div class="inner inner6">6</div>
      <div class="inner inner7">7</div>
      <div class="inner inner8">8</div>
      <div class="inner inner9">9</div>
      <!-- <div class="inner inner10">10</div>
      <div class="inner inne11">11</div>
      <div class="inner inner12">12</div> -->
    </div>
  </div>
</body>

</html>